<script setup>
import {useCounterStore} from '@/store/counter.js'
// 引入仓库
import {useChannelStore} from '@/store/channel.js'
import {storeToRefs} from 'pinia'
import SonCom1 from "@/components/SonCom1.vue";
import SonCom2 from "@/components/SonCom2.vue";

const counter = useCounterStore()
const channel = useChannelStore()

// 解构属性需要使用 storeToRefs将仓库转为响应式
const {count, msg, double} = storeToRefs(counter)
const {channelList} = storeToRefs(channel)

// 方法无需使用storeToRefs转为响应式
const {getChannelList} = channel
</script>

<template>
  <div>
    根组件 - {{ count }}
    根组件 - {{ msg }}
    根组件 - {{ double }}
    <hr>
    <SonCom1></SonCom1>
    <SonCom2></SonCom2>
    <hr>
    <!--    调用仓库中的方法-->
    <button @click="getChannelList">异步请求数据</button>
    <!--    使用仓库中的数据-->
    <ul>
      <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

